<template>
  <div>
    <h1 class="title">{{ info.articletitle }}</h1>
    <div>{{ info.articlecontent }}</div>
  </div>
</template>

<script>
export default {
  name: "QueryOneArticle",
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      vm.querOneArticle();
    });
  },
  data() {
    return {
      info: {
        articleid: "",
        articletitle: "",
        articlecontent: "",
        articleauthor: "",
        articledate: "",
        articleclassification: "",
        articlebrowse: "",
        articlefabulous: "",
        articlecomment: "",
        articlecollection: "",
      },
    };
  },
  methods: {
    querOneArticle() {
      let last = this.$route.params;
      let lasta = last.article;
      let articleid = lasta;
      this.axios({
        method: "GET",
        headers: {
          Authorization: window.sessionStorage.getItem("userLogin"),
        },
        url: this.$constant.url + "/article/queryOneArticleid/" + articleid,
      }).then(({ data }) => {
        if (data.code == 100) {
          this.info = data.data;
        }
      });
    },
  },
};
</script>

<style scoped>
.title {
  text-align: center;
}
.el-header {
  background-color: rgb(84, 92, 100);
  color: rgb(255, 255, 255);
  line-height: 60px;
}
.el-row {
  margin-bottom: 20px;
  background-color: rgb(84, 92, 100);
  color: rgb(255, 255, 255);
  line-height: 60px;
}
.el-col {
  border-radius: 4px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  height: 60px;
  line-height: 60px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
el-col:hover div {
  background: red;
}
</style>